<template>
    <footer class="app-footer">
      <el-row :gutter="20" type="flex" justify="space-between" align="middle">
        <!-- 左侧信息区域 -->
        <el-col :xs="24" :sm="12" :md="14" class="footer-info">
          <div class="info-group">
            <div class="info-item">作者：k1ccc0</div>
            <div class="info-item">校址：福建省武夷山市百花路358号</div>
            <div class="info-item">邮政编码：354300</div>
          </div>
          <div class="info-group">
            <div class="info-item">
              <el-icon><i-ep-Message /></el-icon>
              电子邮件：wyxybgs@wuyiu.edu.cn
            </div>
            <div class="info-item">
              <el-icon><i-ep-Phone /></el-icon>
              招生电话：0599-5136788
            </div>
          </div>
          <div class="copyright">
            © {{ new Date().getFullYear() }} 武夷学院. All rights reserved.
            <span class="beian">闽ICP备05001875号</span>
          </div>
        </el-col>
  
        <!-- 右侧社交区域 -->
        <el-col :xs="24" :sm="12" :md="10" class="social-section">
          <div class="social-group">
            <div class="social-icons">
              <a href="#" class="icon" target="_blank" aria-label="Facebook">
                <el-icon :size="22"><i-ep-FacebookFilled /></el-icon>
              </a>
              <a href="#" class="icon" target="_blank" aria-label="Twitter">
                <el-icon :size="22"><i-ep-Twitter /></el-icon>
              </a>
              <a href="#" class="icon wechat-hover" aria-label="微信">
                <el-icon :size="22"><i-ep-Wechat /></el-icon>
                <div class="qr-code">
                  <el-image :src="require('@/assets/weixin.jpg')" fit="cover" />
                </div>
              </a>
              <a href="#" class="icon" target="_blank" aria-label="Linkedin">
                <el-icon :size="22"><i-ep-Linkedin /></el-icon>
              </a>
            </div>
            <div class="qr-codes">
              <div class="qr-item">
                <el-image 
                  :src="require('@/assets/weixin.jpg')" 
                  fit="cover"
                  class="qr-image"
                />
                <div class="qr-text">微信公众号</div>
              </div>
              <div class="qr-item">
                <el-image
                  :src="require('@/assets/weibo.jpg')"
                  fit="cover"
                  class="qr-image"
                />
                <div class="qr-text">官方微博</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </footer>
  </template>
  
  <script>
  export default {
    name: 'AppFooter'
  }
  </script>
  
  <style scoped>
  .app-footer {
    background-color: #2d2d2d;
    color: #e0e0e0;
    padding: 40px 5%;
    font-size: 14px;
    line-height: 1.6;
  }
  
  .footer-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .info-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
  }
  
  .info-item:hover {
    color: #409EFF;
  }
  
  .el-icon {
    color: #409EFF;
  }
  
  .copyright {
    margin-top: 15px;
    opacity: 0.8;
    font-size: 13px;
  }
  
  .beian {
    margin-left: 20px;
    color: #888;
  }
  
  .social-section {
    display: flex;
    justify-content: flex-end;
  }
  
  .social-group {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  
  .social-icons {
    display: flex;
    justify-content: flex-end;
    gap: 25px;
    flex-wrap: wrap;
  }
  
  .icon {
    color: #e0e0e0;
    transition: all 0.3s;
    position: relative;
  }
  
  .icon:hover {
    color: #409EFF;
    transform: translateY(-2px);
  }
  
  .qr-codes {
    display: flex;
    gap: 30px;
    justify-content: flex-end;
  }
  
  .qr-item {
    text-align: center;
  }
  
  .qr-image {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 8px;
  }
  
  .qr-text {
    font-size: 12px;
    color: #888;
  }
  
  /* 微信悬浮二维码 */
  .wechat-hover .qr-code {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }
  
  .wechat-hover:hover .qr-code {
    opacity: 1;
    visibility: visible;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .el-row {
      flex-direction: column;
      gap: 30px;
    }
  
    .info-group {
      flex-direction: column;
      gap: 15px;
    }
  
    .social-icons,
    .qr-codes {
      justify-content: center;
    }
  
    .qr-codes {
      flex-wrap: wrap;
    }
  
    .social-section {
      justify-content: center;
    }
  
    .beian {
      display: block;
      margin-left: 0;
      margin-top: 10px;
    }
  }
  </style>